<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新建文档</title>
<link 	href="../../../css/simple.css" rel="stylesheet" type="text/css" charset="utf-8" />
<script src="../../../scripts/raphael.js"></script>
<script src="../../../scripts/FormUtil.js" charset="utf-8"></script>
<script src="../../../scripts/util2.js"></script>
<script src="../../../scripts/2dcanvas.js"></script>
<script src="../map.js"></script>
<style>
	div{ border:solid 1px #CCCCCC; margin:5px; width:100px; height:20px}
	#container{width:100%;height:800px;}
	#left_bar{width:20%; height:100%;}
		#left_bar div{width:100%;}
			#area_thum{width:200px;height:200px}
		#area_form{height:80%;}
	#main{width:76%; height:80%;}
		#areaDiv{width:96%; height:100%;}
		
	.map-rule-left{border:none;position:absolute; z-index:2; background-color:#eee; text-align:center;margin:0px; padding:0px;}
	.map-rule-top{border:none;position:absolute; z-index:2; background-color:#eee; text-align:center; vertical-align:sub; margin:0px; padding:0px; z-index:2; padding-top:0px;}
	.map-rule-top span{margin-top:10px}
	.rulerButton{cursor:pointer}
	.rulerButton:hover{color:#f44;}
	#map-container{background-color:#fee;width:500px; height:400px; overflow:auto; margin:0px auto}
</style>
<script>
	window.onload = function(){
		var divlist = document.getElementsByTagName('div');
		for(var i=100;i<divlist.length;i++){
			var div = divlist[i];
			div.style.backgroundColor = StringUtil.getColor(0x000066, i);
			
		}
		DomUtil.createCss('');
		initArea();
	}
	
	var area;

	function initArea(){
		area = new CanvasHallArea('area_canvas', 400, 300);
		area.maxWidth = 800;
		area.maxHeight = 600;
		area.cellWidth = 40;
		area.cellHeight = 40;
		area.onselect = function(rect){
			
			rect.width += area.cellWidth*2;
			rect.height += area.cellHeight*2;
			rect.x -= area.cellWidth;
			rect.y -= area.cellHeight;
			
			var list = area.getSelected(rect);
			for(var i=0; i<list.length; i++){
				var sofa = list[i];
				if(sofa){
					sofa.selected  = !sofa.selected;
					sofa.repaint();
				}
			}
		}
		//display
		area.fillItems(Seat, {virtual:true});
		area.repaint();

	}
	
	function zoom(rate){
		area.zoom(rate);
	}
	
	function save(){
		var list = area.itemMap;
		var str = '';
		for(var id in list){
			var sofa = area.itemMap[id];
			if(sofa.selected){
				if(str){
					str += ',';
				}
				str += sofa.rowNum+':'+sofa.colNum;
			}
		}
		alert(str);
		var params = {};
		params.sofa = str;
		//ajaxRequest('save.json', params, function(result){
		//	alert('保存成功！');
		//});
	}
	
</script>
</head>

<body>
    <div id="container">
      <div id="left_bar" class="fl">
        <div>
            <select name="select_area" id="select_area">
              <option value="">1</option>
            </select>
        </div>
        <div><img id="area_thum" src=""/></div>
        <div id="area_form">
            <form id="area_form1">
                <input name="" type="text" />
                <input type="button" value="保存" onclick="save()" />
            </form>
        </div>
      </div>
      <div id="main" class="fl">
        <div id="toolbar">
			<button onclick="zoom(0.8)">zoom-</button>
			<button onclick="zoom(1.2)">zoom+</button>
        </div>
        <div id="areaDiv">
        	<div id="area_canvas"></div>
        </div>
      </div>
    </div>
</body>
</html>
